<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="frame_bottom">
    <text>传鸿组态二维图形版</text>
    <div>{{ tips }}</div>
    <div class="coordinate">
      <div class="coordinate_item">
        <div class="coordinate_tiele">坐标</div>
        <div class="coordinate_info">x:{{ coordinate.x }}</div>
        <div class="coordinate_info">y:{{ coordinate.y }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
// import { reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { storeToRefs } from "pinia";
import { useCanvasStore } from "@/store/canvasStore"; // 画布

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const canvasStore = useCanvasStore(); // 画布

/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */
/** 解构存储*/
const { tips, coordinate } = storeToRefs(canvasStore);
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

.frame_bottom {
  background-color: #000000;
  margin: 0px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  user-select: none;
}

// 坐标
.coordinate {
  margin: 0px;
  width: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  font-size: 0.2em;
}

// 坐标项目
.coordinate_item {
  margin: 0px;
  width: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

// 坐标名称
.coordinate_tiele {
  margin: 0px;
  width: 126px;
}

// 坐标参数
.coordinate_info {
  margin: 0px;
  padding-left: 5px;
  width: 100%;
}
</style>
